import React from 'react';
import { LogoHeader } from '../../components/Header';

import styles from './index.module.less';

export default class PaymentResult extends React.Component {
  state = {
    result: 'fail',
  };

  render() {
    const { result } = this.state;

    return (
      <React.Fragment>
        <LogoHeader moduleName='收银台' />
        <div className={styles.content}>
          <div className={styles.box}>
            <div className={styles.paymentResultIconBox}>
              {
                result !== 'success' ? (<i className={`iconfont icon-zhifushibai ${styles.failIcon}`}></i>) : (<i className={`iconfont icon-zhifuchenggong ${styles.successIcon}`}></i>)
              }

            </div>
            <div className={styles.paymentResultTextBox}>
              {result !== 'success' ? '支付失败' : '支付成功'}
            </div>
            {
              result !== 'success' && (
                <div className={styles.repaymentBox}>
                  <div className={styles.tipsAndBtnBox}>
                    <dl className={styles.tips}>
                      <dt>原因：</dt>
                      <dd>1.请检查付款账号余额是否充足；</dd>
                      <dd>2.付款账户是否已达银行支付的最高限额。</dd>
                    </dl>
                    <button className={styles.repaymentBtn}>重新支付</button>
                  </div>
                </div>
              )
            }
            <div className={styles.goToOrderListBox}>
              <span>进入订单列表>></span>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
